<template>
  <div class="otherHome">
    <Other-Header index="4" bgColor="#5741d9" @changelang="changeLanguage"></Other-Header>
    <div class="informationBox">
      <!-- 资讯-->
      <div class="newsItem" v-for="(item, index) in items" :key="index">
        <div class="dateInfo fl">
          <p class="date">{{item.date}}</p>
          <p class="month">{{item.month}}</p>
        </div>
        <img :src="item.src" alt class="newsImg" />
        <div class="newsDetails">
          <h4 class="newsTitle">{{item.title}}</h4>
          <p class="newsDesc">{{item.details}}</p>
          <el-button class="btnDetail" size="small" @click="detailsMessage(item.id)">{{$t('l.other_a_24')}}</el-button>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style lang="less" scoped>
.otherHome {
  padding-top: 100px;
  background-color: #f7f8fc;
  position: absolute;
  top: 0;
  min-height: 100%;
  width: 100%;
}
.informationBox {
  width: 1200px;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding-bottom: 160px;
}
.newsItem {
  width: 1200px;
  height: 260px;
  box-sizing: border-box;
  padding: 45px 65px 45px 42px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 20px;
}
/* 日期 */
.dateInfo {
  float: left;
  width: 128px;
  height: 128px;
  background: #f2f6fa;
  border-radius: 6px;
  text-align: center;
  padding: 26px 0;
  box-sizing: border-box;
  margin-right: 52px;
  .date {
    font-size: 50px;
    font-familyA: Roboto-Medium;
    font-weight: 500;
    color: rgba(98, 103, 136, 1);
    line-height: 58px;
  }
  .month {
    font-size: 16px;
    font-familyA: Roboto-Regular;
    font-weight: 400;
    color: rgba(98, 103, 136, 1);
    line-height: 19px;
  }
}
/* 图片 */
.newsImg {
  float: right;
  width: 280px;
  height: 170px;
  margin-left: 50px;
}
/* 内容 */
.newsDetails {
  overflow: hidden;
  .newsTitle {
    font-size: 22px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 30px;
    margin-bottom: 16px;
  }
  .newsDesc {
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 1);
    line-height: 28px;
    margin-bottom: 16px;
  }
  .btnDetail {
    width: 130px;
  }
}
</style>
<script>
import commonMixins from "@/mixins";
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

export default {
  mixins: [commonMixins],
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      items: []
    };
  },
  async created() {
    this.getNewsList();
  },
  methods: {
    async getNewsList() {
      let params = {
        lang: "zh_CN",
        pageNum: 1,
        pageSize: 15,
        typeCode: "news"
      };
      let res = await api.announcementList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: newList } = data;

        this.items = newList.map(item => ({
          id: item.id,
          date: item.createTime && item.createTime.substr(8,2),
          month: item.createTime && item.createTime.substr(0,7),
          src: item.pictureUrl,
          title: item.title,
          details: item.introduction
        }));
      } else {
        this.$layer.msg(msg);
      }
    },
    detailsMessage(newsId) {
      this.$router.push(`/newsDetail/${newsId}`);
    }
  }
};
</script>
